<template>
    <BasicModal v-bind="$attrs" @register="register" :title="getTitle" width="950px" @ok="handleSubmit">
        <a-spin :spinning="loading" size="large" tip="Loading...">
            <a-form ref="formRef" class="antd-modal-form">
                <p style="text-align: center;">
                    <span style="width: 35%;text-align: center;font: 1.7em sans-serif;">{{ formData.samName }}</span><br>
                    <span style="width: 35%;text-align: center;font: 1.7em sans-serif;">检验结果报告单</span>
                </p>
                <table id="items" cellspacing="1" style="width: 100%;height: 150px;border: 1px solid #a8aeb2;">
                    <tr class="tr">
                        <th class="thC">依据标准:</th>
                        <th class="thE" :colspan="3"><a-input  v-model:value="formData.basisName" size="large" class="input" readonly="true"/></th>
                    </tr>
                    <tr class="tr">
                        <th class="thC">样品编号:</th>
                        <td class="thE"><a-input  v-model:value="formData.samNum" size="large" class="input"  readonly="true"/></td>
                        <td class="thC">报告编号:</td>
                        <td class="thE"><a-input  v-model:value="formData.reportNum" size="large" class="input" /></td>
                    </tr>
                    <tr class="tr">
                        <th class="thC">填报日期:</th>
                        <td class="thE"><a-date-picker valueFormat="YYYY-MM-DD" v-model:value="formData.reportDate" size="large" class="input" /></td>
                        <td class="thC"></td>
                        <td class="thE"></td>
                    </tr>
                </table>
                <!--项目列表-->
                <labItemsTable ref="registerItemsTable"  :labEntrustItemsList="formData.labEntrustItemsList"></labItemsTable>
                <table id="items" cellspacing="1" style="width: 100%;height: 250px;border: 1px solid #a8aeb2;">
                    <tr class="tr">
                        <th class="thB">检验结论</th>
                        <th style="width: 20%;text-align: center;border: 1px solid #a8aeb2;font: 1.2em sans-serif;" colspan="5"><a-textarea v-model:value="formData.reportConcl" size="large" class="input" /></th>
                    </tr>
                    <tr class="tr">
                        <th class="thB">备注</th>
                        <th style="width: 20%;text-align: center;border: 1px solid #a8aeb2;font: 1.2em sans-serif;" colspan="5"><a-textarea v-model:value="formData.remark" size="large" class="input"/></th>
                    </tr>
                    <tr style="height: 40px;border: 1px solid #a8aeb2;">
                        <th class="thB">批准人</th>
                        <th style="width: 20%;text-align: center;border: 1px solid #a8aeb2;font: 1.2em sans-serif;"><a-input v-model:value="formData.ratifyName" size="large" class="input"  @click="handleRatifyModal"/></th>
                        <th class="thB">审核人</th>
                        <th style="width: 20%;text-align: center;border: 1px solid #a8aeb2;font: 1.2em sans-serif;"><a-input v-model:value="formData.auditName" size="large" class="input"  @click="handleAuditModal"/></th>
                        <th class="thB">主检人</th>
                        <th style="width: 20%;text-align: center;border: 1px solid #a8aeb2;font: 1.2em sans-serif;"><a-input v-model:value="formData.checkName" size="large" class="input"  readonly="true"/></th>
                    </tr>
                </table>
            </a-form>
        </a-spin>
    </BasicModal>
    <TableUserModal @register="registerUserModal"   @getRatifyResult="onRatifyOk"  @getAuditResult="onAuditOk"></TableUserModal>
</template>
  
<script lang="ts" setup>
import { BasicModal, useModalInner,useModal } from '/@/components/Modal';
import { ref, reactive } from 'vue';
import labItemsTable from './LabCheckItemsTable.vue';
import TableUserModal from './LabUserTableList.vue';
import { queryReportData,saveOrUpdateData } from './LabItemResultList.api';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();


const registerItemsTable = ref();
const formRef = ref();
const emit = defineEmits(['success']);
const loading = ref(true);
const getTitle = ref('检验结果报告单');
const formData = reactive<Record<string, any>>({
    id: "",
    samName: "",
    samNum:"",
    basisName:"",
    basisNum:"",
    reportNum:"",
    reportDate:null,
    reportConcl:"",
    remark:"",
    taskId:"",
    checkId:"",
    checkName:"",
    auditId:"",
    auditName:"",
    ratifyId:"",
    ratifyName:"",
    labEntrustItemsList: [],
    entrustId: "",
    entrustType: "",
});

const [registerUserModal, { openModal:openUModal }] = useModal();

function handleRatifyModal() {
    openUModal(true,{
        oper:"ratify"
    });
}

function handleAuditModal() {
    openUModal(true,{
        oper:"audit"
    });
}

//批准
function onRatifyOk(uId, uName) {
    formData.ratifyId = uId;
    formData.ratifyName = uName;
}
 //审核
function onAuditOk(uId, uName) {
    formData.auditId = uId;
    formData.auditName = uName;
}



const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({
        minHeight: 800,
        showOkBtn:data.disabled,
    });
    formData.taskId = data.record.id;
    let params = {
        taskId: formData.taskId,
        entrustType: formData.entrustType,
    };
    await queryReportData(params).then((res) => {
        Object.assign(formData, res);
        formData.entrustType = data.record.entrustType;
    }).finally(() => {
        loading.value = false
    })
});

//提交表单数据
async function handleSubmit() {
    formData.auditId = formData.auditId;
    formData.auditName = formData.auditName;
    if ((formData.auditName != "" && formData.auditName != null) && (formData.ratifyName != "" && formData.ratifyName != null)) {
        // console.log(formData);
        await saveOrUpdateData(formData).then((res) => {
            createMessage.success(res.message);
        }).finally(()=>{
            closeModal();
            emit('success');
        });
    } else {
        createMessage.warning("请选择批准和审核人员!");
    }

}


</script>
  
<style scoped>
.header {
    line-height: 35px;
    background-color: #f2f2f2;
    color: #666;
}


.tr {
    height: 50px;
    border: 1px solid #a8aeb2;
}
.thA {
    width: 75%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}
.thB {
    width: 15%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.thC {
    width: 20%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.thD {
    width: 80%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.thE {
    width: 30%;
    text-align: center;
    border: 1px solid #a8aeb2;
    font: 1.1em sans-serif;
}

.input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: inherit;
    outline: none;
    border-bottom: none;
    font: 1em sans-serif;
}
</style>